<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="author" content="Aries">
    <meta name="keywords" content="HTML,CSS,JavaScript,淘宝">
    <meta name="description" content="使用Javascript实现淘宝楼层跳跃效果">
    <title>使用JavaScript实现侧边导航条锚点效果</title>
    <link rel="stylesheet" href="../css/init.css">
    <link rel="stylesheet" href="../css/index.css">
</head>
<body>
<div class="main">
    <div class="content">
        <div id="shop">好店直播</div>
        <div id="quality">品质特色</div>
        <div id="cell">实惠热卖</div>
        <div id="like">猜你喜欢</div>
    </div>
    <div id="sidebar" class="sidebar">
        <a id="curr" class="point shop" data-url="shop" href="javascript:;">好店<br>直播</a>
        <a class="point quality" data-url="quality" href="javascript:;">品质<br>特色</a>
        <a class="point cell" data-url="cell" href="javascript:;">实惠<br>热卖</a>
        <a class="point like" data-url="like" href="javascript:;">猜你<br>喜欢</a>
    </div>
</div>

<script>
    let scrollTop=0;    // 滚动距离
    let timer = null;   // 定时器
    let sidebar = document.getElementById("sidebar");
    let points = sidebar.getElementsByClassName("point");
    for (let i = 0; i < points.length; i++) {
        points[i].onclick = function () {

            // 获取当前被点击的对象的data-url属性
            let data_url = points[i].getAttribute("data-url");

            let url = document.getElementById(data_url);
            url.timer = null;   // 为每个对象添加独立的定时器

            move(url,url.offsetTop);
        }
    }

    /**
     * 移动函数
     * @param obj       待移动对象
     * @param target    目标距离
     */
    function move(obj,target) {
        if(obj.timer != null)   // 每次调用定时器时,都将原有定时器清空
            clearInterval(obj.timer);
        else
            obj.timer = setInterval(function () {

                // 设置缓冲速度
                let speed = (target - scrollTop) / 10;
                // 二次处理速度
                speed = speed>0? Math.ceil(speed):Math.floor(speed);

                // 设置每次滚动距离
                scrollTop = scrollTop + speed;

                // 调用window对象的scrollTo(x,y)方法。
                // x:在窗口文档显示区左上角显示的文档的 x 坐标。
                // y:在窗口文档显示区左上角显示的文档的 y 坐标。
                window.scrollTo(0,scrollTop);

                // 判断缓冲停止条件
                if(Math.abs(target-scrollTop) < 5){
                    clearInterval(obj.timer);
                    window.scrollTo(0,target);
                }
            },30);
    }

    window.onscroll = function () {

        // 检测当前页面滚动距离
        scrollTop = document.documentElement.scrollTop || document.body.scrollTop || window.pageYOffset;
    };
</script>
</body>
</html>